<template>
  <view class="status-line">
    <view class="status-active" :style="{ width: `${props.progress}%` }"></view>
  </view>
</template>

<script setup lang="ts">

interface IProps {
  progress: number;
}

const props = withDefaults(defineProps<IProps>(), {
  progress: 0,
});
</script>

<style scoped lang="scss">
.status-line {
  height: 0.5rem;
  border: 0.5px solid rgba(0, 0, 0, 0.2);

  .status-active {
    height: 100%;
    transition: width 0.3s ease;
    border-top-right-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
    background-color: #ffd6db;
  }
}
</style>